<template lang="pug">
  section(style='position:relative')
    aside.site-header
      span(v-for="(site, index) in siteLists",v-if="index < showSiteMax",
        :class="{'site-active': showSiteId === site.siteId}",
        :key="index",:data-test='site.siteId',@click='handleChangeSite(site.siteId,index)').site-item {{site.siteName}}
        i(v-if="site.siteName!=='全部'") ({{site.number}})
    aside(v-if="showSitePanel",@click='handleSiteMore').site-showMore {{showSiteMore?'更多':'收起'}}
      Icon(:type="showSiteMore ? 'ios-arrow-down':'ios-arrow-up'")
</template>

<script>
export default {
  name: 'SiteList',
  props: {
    siteLists: Array
  },
  data() {
    return {
      showSitePanel: false,
      showSiteMore: true,
      showSiteMax: 20,
      showSiteId: ''
    }
  },
  methods: {
    handleChangeSite(siteId, index) {
      this.showSiteId = siteId
      this.$emit('changeSite', siteId, index)
    },
    handleSiteMore() {
      this.showSiteMore = !this.showSiteMore
      if (this.showSiteMore) {
        this.showSiteMax = 20
      } else {
        this.showSiteMax = this.siteLists.length
      }
    }
  }
}
</script>

<style lang="scss">
.site {
  &-header {
    max-width: 1170px;
    overflow: hidden;
    min-height: 32px;
    margin-bottom: 20px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #b7b7b7;
  }
  &-active {
    border-radius: 4px;
    background-color: rgba(45, 140, 240, 1);
  }
  &-item {
    display: inline-block;
    padding: 6px 15px;
    color: #589bee;
    font-size: 14px;
    cursor: pointer;
    &.site-active {
      color: #fff;
    }
  }
  &-showMore {
    position: absolute;
    bottom: 9px;
    right: 0;
    color: #589bee;
    cursor: pointer;
    .ivu-icon {
      vertical-align: baseline;
      margin-left: 5px;
    }
  }
}
</style>


